<template>
  <v-container class="blog-container" :style="showBanner ? '' : 'margin-top: 76px'">
    <div class="sidebar-container">
      <SideBar></SideBar>
    </div>
    <div class="card-container">
      <router-link to="/about" :class="showBanner ? 'wow animate__zoomIn dynamics-container' : 'animated animate__zoomIn dynamics-container'">
        <div class="dynamics-title">
          <svg-icon icon="notice"></svg-icon>
          <span>动态</span>
        </div>
        <span class="dynamics-body">
          这里是动态这里是动态这里是动态这里是动态这里是动里是动态这里是动态这里是动态
        </span>
        <svg-icon icon="more"></svg-icon>
      </router-link>
      <v-card :class="showBanner ? 'wow animate__fadeInUp text-center home-container' : 'animated animate__fadeInUp text-center home-container'">
        <!-- 首页轮播图 -->
        <v-carousel hide-delimiter-background show-arrows-on-hover class="swiper-wrapper">
          <template v-slot:prev="{ on, attrs }">
            <v-btn fab v-bind="attrs" v-on="on" small>
              <svg-icon icon="left" style="font-size: 18px;"></svg-icon>
            </v-btn>
          </template>
          <template v-slot:next="{ on, attrs }">
            <v-btn fab v-bind="attrs" v-on="on" small>
              <svg-icon icon="right" style="font-size: 18px;"></svg-icon>
            </v-btn>
          </template>
          <v-carousel-item
            v-for="item in items"
            :key="item.id"
            :to="'/about'"
            :src=item.src>
            <h3 class="swiper-title">
              再见2022，再见我的大学生活
            </h3>
          </v-carousel-item>
        </v-carousel>
        <!-- 精选分类 -->
        <div class="index_hot-container">
          <span class="index_title">精选分类</span>
          <a class="index_hot-all">
            <svg-icon icon="guide"></svg-icon>
            <span>全部分类</span>
          </a>
        </div>

        <div class="index_hot-list">
          <!-- 使用a标签确保手型是正确的 -->
          <a :class="showBanner ? 'wow animate__fadeIn index_hot-list-item' : 'animated animate__fadeIn index_hot-list-item'">
            <img src="https://www.static.banq.ink/photos/fa74451429d178e2682a3cf6e833c019.png" class="on-hover">
            <div class="index_hot-list-item-desc">分类内容</div>
          </a>
          <a :class="showBanner ? 'wow animate__fadeIn index_hot-list-item' : 'animated animate__fadeIn index_hot-list-item'">
            <img src="https://www.static.banq.ink/photos/fa74451429d178e2682a3cf6e833c019.png" class="on-hover">
            <div class="index_hot-list-item-desc">分类内容</div>
          </a>
          <a :class="showBanner ? 'wow animate__fadeIn index_hot-list-item' : 'animated animate__fadeIn index_hot-list-item'">
            <img src="https://www.static.banq.ink/photos/fa74451429d178e2682a3cf6e833c019.png" class="on-hover">
            <div class="index_hot-list-item-desc">分类内容</div>
          </a>
          <a :class="showBanner ? 'wow animate__fadeIn index_hot-list-item' : 'animated animate__fadeIn index_hot-list-item'">
            <img src="https://www.static.banq.ink/photos/fa74451429d178e2682a3cf6e833c019.png" class="on-hover">
            <div class="index_hot-list-item-desc">分类内容</div>
          </a>
        </div>
        <!-- 最新文章 -->
        <div class="index_article-container">
          <div class="index_title">
            最新文章
          </div>
        </div>
        <!-- 文章列表 -->
        <ArticleList></ArticleList>
      </v-card>

      <div class="index_footer">
        <v-btn dark class="index_article-more-btn">查看更多...</v-btn>
      </div>
    </div>
  </v-container>
</template>

<script>
import ArticleList from '../../../components/ArticleList/index.vue'
import SideBar from '../../../layout/SideBar/index.vue'

export default {
  name: 'HelloWorld',

  components: { SideBar, ArticleList },

  data () {
    return {
      items: [
        {
          id: '1',
          src: 'https://www.static.banq.ink/photos/fa74451429d178e2682a3cf6e833c019.png'
        },
        {
          id: '2',
          src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg'
        },
        {
          id: '3',
          src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
        },
        {
          id: '4',
          src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
        }
      ]
    }
  },

  computed: {
    showBanner () {
      return this.$store.getters.showBanner
    }
  }
}
</script>

<style lang="scss" scoped>
.artboard {
  font-family: 'Fredericka the Great',Mulish,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size: 3.5em;
  line-height: 1.2;
}
.index_hot-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}
.index_title {
  position: relative;
  font-weight: 600;
  height: 2rem;
  line-height: 2rem;
}
.index_hot-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  -webkit-column-gap: 15px;
  -moz-column-gap: 15px;
  column-gap: 15px;
  padding-top: 12px;
}
.swiper-title {
  float: left;
  color:#fff;
  padding: 10px;
  bottom: 0px;
  z-index: 2;
}

.index_hot-all {
  font-size: 15px;
  color: #909399;
  line-height: 20px;
  max-width: 300px;
  -webkit-transition: color .35s;
  transition: color .35s;

  .svg-icon {
    margin-right: 0.25rem;
  }
}
.index_hot-list-item {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  background: #000;
}
.on-hover {
  width: 100%;
  height: 100%;
  opacity: .8;
  object-fit: cover;
  transition: all 0.3s;
}
.index_hot-list-item:hover {
  .on-hover {
    transform: scale(1.1);
  }
}
.index_hot-list-item-desc {
  position: absolute;
  height: 100%;
  width: 100%;
  color: #fff;
  top: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.index_article-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}
.dynamics-body {
  width: 50%;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.index_footer {
  width: 100%;
  text-align: center;

  .index_article-more-btn {
    font-weight: 600;
    margin-top: 1.5rem;
  }
}
</style>
